<template>
	<!-- 镇长合格页面 -->
	<view>
		<!-- <u-navbar title="消息" @rightClick="rightClick" :autoBack="true" placeholder leftIconSize="22px" rightText="清除未读">
		</u-navbar> -->
		<view class="ApprovalStatus">
			<text>审核状态</text>
			<text v-if="info.check_status==0">待审核</text>
			<text v-else-if="info.check_status==1">合格</text>
			<text v-else-if="info.check_status==2">不合格</text>
		</view>
		
		
		<!-- 回访用户信息 -->
		<view class="visitor">
			<text>回访用户信息</text>
		</view>
		<view class="indexbody" >
			<view class="indexbody_title">
				<view>{{info.name}}</view>
			</view>
			<view class="indexbody_content">
				<text>{{info.name}}</text>
				<text>{{info.age }}岁</text>
				<text>{{info.idcard}}</text>
			</view>
			<view class="indexbody_address">
				<view class="">
					<image src="../../static/index/address.png" mode=""></image>
				</view>
				<view class="">
					<text>{{info.city}}{{info.detail}}</text>
				</view>
			</view>
			<view class="indexbody_phone">
				<text>{{info.phone}}</text>
			</view>
		</view>
		<view class="tabs">
			<u-sticky bgColor="#fff">
				<u-tabs :list="list1" lineWidth="70" lineColor="#0C68FD" @click="changeTab" :activeStyle="{
				color: '#0C68FD',
				fontWeight: 'bold',
				transform: 'scale(1.05)'
			}" :inactiveStyle="{
				color: '#606266',
				transform: 'scale(1)'
			}" itemStyle="padding-left: 90rpx; padding-right: 70rpx; height: 68rpx;"></u-tabs>
			</u-sticky>
		</view>
		
		
		
	  <template v-for="(item,index) in list">	
		<view class="visitor">
			<text>走访人信息</text>
		</view>
		<!-- 走访人信息 -->
		<view class="VisitorInformation">
			<view class="VisitorInformation_list">
				<text>负责人</text>
				<text>{{item.username}}</text>
			</view>
			<view class="VisitorInformation_list">
				<text>回访方式</text>
				<text v-if="item.type==0">暂无</text>
				<text v-else-if="item.type==1">电访</text>
				<text v-else-if="item.type==2">面访</text>
			</view>
			<view class="VisitorInformation_list">
				<text>回访时间</text>
				<text>{{item.createtime}}</text>
			</view>
			<view class="VisitorInformation_list">
				<view class="">
					<view class="certificate">
						回访凭证
					</view>
					<view class="Voice_input">
						<view class="Image_box">
							<div class="box" v-for="(ite,index) in item.imgs.split(',')"  @click="clickImg(item.imgs.split(','),index)">
								<image :src="baseUrl+ite"  mode=""></image>
							</div>
							
						</view>
					
					</view>
					
				</view>
			</view>
		</view>
		
			
      
			<!-- 回访内容 -->
			<view class="visitor">
				<text>回访内容</text>
			</view>
			<view class="VisitorInformation">
				<view class="VisitorInformation_list">
					<text>居住环境</text>
					<text>{{item.live}}</text>
				</view>
				<view class="VisitorInformation_list">
					<text>个人卫生</text>
					<text>{{item.hygiene}}</text>
				</view>
				<view class="VisitorInformation_list">
					<text>身体状况</text>
					<text>{{item.body}}</text>
				</view>
				<view class="VisitorInformation_list">
					<view class="certificatee">
						<text>需求</text>
					</view>
					<view class="Demandcontent">
						<text>{{item.need}}</text>
					</view>
				</view>
				<view class="VisitorInformation_list">
					<text>其他</text>
					<text>{{item.other}}</text>
				</view>
			</view>
			
		</template>
      <view class="loadingText">{{loadingText}}</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				// 图片
				src: 'https://cdn.uviewui.com/uview/album/1.jpg',
				villager_id: '',
				info: {},
				check_status: '',
				list: [],
				page: 1,
				loadingText: '',
				baseUrl:this.baseUrl,
				record_ids:'',
				list1: [{
					name: '全部',
					id: 0
				}, {
					name: '电访',
					id: 1,
				
				}, {
					name: '面访',
					id: 2
				}],
				type:0
			};
		},
		
		onLoad(option) {
			this.villager_id = option.villager_id;
			this.list = [];
			this.page = 1;
			this.getList();
		},
		onPullDownRefresh() {
			this.page = 1
			this.getList();
		},
		onReachBottom() {
			this.loadingText = "上拉显示更多"
			this.getMoreList();
		},
		onShow() {
			this.list = [];
			this.page = 1
			this.getList();
		},
		methods: {
			rightClick() {

			},
			changeTab(item) {
				console.log(item)
				this.type = item.id;
				// console.log(this.status)
				// this.list = [];
				this.page = 1;
				
				console.log(this.list)
				this.getList();
				
				
				
			},
			clickImg(imgs,index) {
				let imgsArray = [];
				for (let i = 0; i < imgs.length; i++) {
					imgsArray.push(this.baseUrl + imgs[i]);
				}
				uni.previewImage({
					current: index,
					urls: imgsArray,
					indicator: 'number',
					loop: true
				});
			
			},
			getMoreList() {
				this.loadingText = '-- 正在加载 --'
				let obj = {};
				obj.villager_id = this.villager_id;
				obj.page = this.page;
				obj.type = this.type;


				this.$api.post('/api/villagers/villagedetail', obj).then((res) => {
					if (res.code == 1) {
						this.info = res.data.beizoufang; 
						if (res.data.list.length == 0 || res.data.list == null) {
							this.loadingText = '-- 暂无更多 --'
							return false;
						}
						var newlist = res.data.list;
						this.list = this.list.concat(newlist)
						this.page++
					} else {
						this.toastMsg(res.msg);
					}
				});
			},

			getList() {
				let obj = {};
				obj.villager_id = this.villager_id;
				obj.page = this.page;
                obj.type = this.type;


				this.$api.post('/api/villagers/villagedetail', obj).then((res) => {
					if (res.code == 1) {
						this.info = res.data.beizoufang; 	
						if (res.data.list.length == 0 || res.data.list == null) {
							this.loadingText = '-- 暂无更多 --'
							return false;
						}
						this.list = res.data.list;
						
					
						uni.stopPullDownRefresh()
						this.page++
					} else {
						this.toastMsg(res.msg);
					}
				})
			},
		
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #EFF1F5;
	}
	/deep/.u-tabs__wrapper__nav__line {
		left: 44rpx;
	}
</style>
<style lang="scss" scoped>
	.tabs {
		display: flex;
		justify-content: center;
		background-color: #fff;
		margin-bottom: 50rpx;
	}
	/* 上传图片 */
		.Voice_input{
			border-bottom: 1px solid rgba(215,215,215,0.50);
		}
		
		.Image_box{
			display: flex;
			align-items: center;
			flex-wrap: wrap;
			margin-top: 15px;
			padding-bottom: 15px;
		}
		
		.box{
			width: 205rpx;
			height: 205rpx;
			border: 1rpx solid #dedede;
			display: flex;
			justify-content: center;
			align-items: center;
		}
		.box image{
			width: 100%;
			height: 100%;
		}
	.button {
		background-color: #fff;
		padding: 20rpx;
		margin: 8rpx 0 0 0;
		display: flex;
	
	}
	.fillins {
		width: 300rpx;
		margin-left: 60rpx;
		color: #333;
		border-radius: 1rpx solid #333;
	}
	.fillin {
		width: 300rpx;
		margin-left: 60rpx;
		background-color: #0B66FD;
		color: #fff;
	}
	.loadingText {
		padding: 20rpx 0 40rpx 0;
		text-align: center;
		color: #310D05;
		font-size: 28rpx;
	}
	.ApprovalStatus {
		display: flex;
		justify-content: space-between;
		margin: 30rpx;
		color: #666666;
		padding: 30rpx;
		border-radius: 20rpx;
		font-size: 30rpx;
		background-color: #fff;

		text:last-child {
			color: #60C17D;
		}
	}

	.visitor {
		margin-left: 30rpx;
		color: #333333;
		font-size: 32rpx;
		font-weight: 500;
	}

	// 走访人信息
	.VisitorInformation {
		margin: 40rpx 30rpx;
		background-color: #fff;
		border-radius: 20rpx;

		.VisitorInformation_list {
			padding: 30rpx;
			display: flex;
			justify-content: space-between;
			border-bottom: 2rpx solid #EFF1F5;

			text:first-child {
				color: #666666;
			}

			text:last-child {
				color: #333333;
			}

			.VisitorInformation_list_image {
				margin: 30rpx 0 0 0;
				display: inline-block;
				padding-right: 20rpx;
			}

		}

	}

	/deep/.certificate {
		color: #666666;
	}

	.certificatee {
		display: block;
		width: 220rpx;
		vertical-align: middle;
	}

	.Demandcontent {
		padding-left: 40rpx;
		margin-right: -10rpx;
	}

	//用户信息
	.indexbody {
		margin: 30rpx 20rpx;
		background-color: #fff;
		border-radius: 20rpx;

		.indexbody_title {
			display: flex;
			justify-content: space-between;
			padding: 20rpx 30rpx;

			image {
				width: 40rpx;
				height: 40rpx;
			}

			:first-child {
				font-weight: bold;
			}
		}

		.indexbody_content {
			background-color: #F8F8F8;
			margin: 10rpx 30rpx;
			padding: 10rpx;
			font-size: 24rpx;

			text {
				padding: 0 16rpx;
				border-right: 2rpx solid #333333;
			}

			:last-child {
				border-right: none;
			}
		}

		.indexbody_address {
			display: flex;
			margin: 20rpx 30rpx;

			image {
				width: 40rpx;
				height: 40rpx;
				margin-right: 18rpx;
			}
		}

		.indexbody_phone {
			background-color: #F8FAFF;
			padding-bottom: 24rpx;
			border-bottom-right-radius: 20rpx;
			border-bottom-left-radius: 20rpx;
			text-align: center;
			padding: 10rpx 0;

		}
	}
</style>
